import { Component ,ViewChild,Input,} from '@angular/core';

@Component({
  selector: 'nova-edit-switch',
  templateUrl: './switch.component.html',
  styleUrls: ['./switch.component.scss']
})

/**
 * 开关组件
 * @example
 * 将flag和comment.isDeleted的值互相绑定
 *  <nova-edit-switch  [flag]="comment.isDeleted" #is >
 *  </nova-edit-switch>
 */
export class EditSwitchComponent {


  /**
   * 获取到当前组件视图中的#rou元素
   */
  @ViewChild('rou') 
  rou:any

  /**
   * 获取到当前组件视图中的#box元素
   */
  @ViewChild('box') 
  box:any
  
  /**
   * @type {boolean} 默认为false
   */
  @Input()
  flag:boolean=false



  /**
   * 给flag变量取反
   */
  onChecked(){
    this.flag=!this.flag
    
    
  }

  /**
   * 给flag变量取反
   * 分别在false或true时执行不同的操作
   */
  // onChecked2(){
  //   this.flag=!this.flag
  //   if(this.flag==true){
  //     this.rou.nativeElement.style.transform="translate(100%,0)";
  //     this.box.nativeElement.style.backgroundColor='#2695d4'
  //     this.rou.nativeElement.innerHTML="√"
  //   }
  //   if(this.flag==false){
  //     this.rou.nativeElement.style.transform="translate(0,0)"
  //     this.box.nativeElement.style.backgroundColor='#000000'
  //     this.rou.nativeElement.innerHTML="×"
  //   }
  // }


}
